<template>
  <div style="width: 97%;margin: 0 auto">
    <div class="search">
      <div style="margin-left: 16px;margin-top: 10px;">
        <i class="el-icon-s-custom" ></i>消息通知
      </div>
      <div class="int">
        <input type="text"  placeholder="请输入类型" v-model="queryParams.type">
        <input type="text"  placeholder="请输入标题通知" v-model="queryParams.headline">
        <el-select v-model="queryParams.state" placeholder="请选择状态" style="margin-left: 20px;width: 250px;"  size="small">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <input type="text"  placeholder="请输入发布时间" v-model="queryParams.time" >
      </div>
      <div class="inquire">
        <el-button type="success" style="height: 30px;display: flex;align-items: center;float:left;margin-right: 20px" @click="handleQuery">
          <i  class="el-icon-search"></i>
          查询</el-button>
        <el-button style="height: 30px;display: flex;align-items: center;" @click="reset">
          <i  class="el-icon-refresh"></i>
          重置</el-button>
      </div>
    </div>
    <div class="list">
      <el-table
        :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        stripe
        style="width: 100%"
        :row-class-name="tableRowClassName">
        <el-table-column
          @click="details(index)"
          prop="newsType"
          label="类型"
          align="center"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="newsTitle"
          label="标题通知"
          align="center"
          width="762">
        </el-table-column>
        <el-table-column
          prop="newsState"
          label="状态"
          align="center"
          width="200">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="发布时间"
          align="center"
          width="300">
        </el-table-column>
      </el-table>
<!--      <div style="position: absolute;right: 30px;bottom: 20px;">-->
        <div style="float:right;margin-right: 20px;margin-top: 20px">
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="Messagelist"
          />

          <!--        <el-pagination-->
<!--          @size-change="handleSizeChange"-->
<!--          @current-change="handleCurrentChange"-->
<!--          :current-page="currentPage"-->
<!--          :page-sizes="[3, 5, 10]"-->
<!--          :page-size="pagesize"-->
<!--          layout=" prev, pager, next,sizes, jumper"-->
<!--          :total="tableData.length">-->
<!--        </el-pagination>-->
      </div>

    </div>
  </div>
</template>

<script>
  import {Messagelist} from "../../api/Information/Information";

  export default {
  name: 'PatientManagement',
  data () {
    return {
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: undefined,
        headline: undefined,
        state: undefined,
        time: undefined
      },
      seek: {
        type: '',
        headline: '',
        state: '',
        time: ''
      },
      currentPage: 1,
      pagesize: 10,
      enable: true,
      labelPosition: 'right',
      options: [{
        value: '1',
        label: '已读'
      }, {
        value: '2',
        label: '未读'
      }],
      tableData: []
    }
  },
    created(){
      this.Messagelist()
    },
  methods: {
    //查询
    handleQuery() {
      this.queryParams.page = 1;
      this.Messagelist();
    },
    //列表
    Messagelist(){
      Messagelist( this.addDateRange(this.queryParams)).then(res=>{
        console.log(res)
        this.tableData = res.rows
        for (let i = 0 ; i<res.rows.length; i++){
          // console.log(res.rows[i].newsType)
          if(res.rows[i].newsType === '0'){
            res.rows[i].newsType="公告通知"
          }else if(res.rows[i].newsType === '1'){
            res.rows[i].newsType="系统消息"
          }else if(res.rows[i].newsType === '2'){
            res.rows[i].newsType="商品消息"
          } else if(res.rows[i].newsType === '3'){
            res.rows[i].newsType="优惠消息"
          } else if(res.rows[i].newsType === '4'){
            res.rows[i].newsType="评论通知"
          }
        }
        for (let i = 0 ; i<res.rows.length; i++){
          // console.log(res.rows[i].newsState)
          if(res.rows[i].newsState === '0'){
            res.rows[i].newsState="未读"
          }else if(res.rows[i].newsState === '1'){
            res.rows[i].newsState="已读"
          }
        }
      }).catch(err=>{
        console.log(err)
      })
    },
    details (index) {
      console.log(1)
      console.log(index)
    },
    handleSizeChange (val) {
      this.pagesize = val
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      this.currentPage = val
      console.log(`当前页: ${val}`)
    },
    // 查看
    editshow () {
      console.log('跳转')
      // this.$router.push('/HomePage/PhysicalNavigation/Physicallook')
    },
    // 上传
    uploading () {

    },
    // 重置
    reset () {
      this.queryParams.type = ''
      this.queryParams.headline = ''
      this.queryParams.state = ''
      this.queryParams.time = ''
    },
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    }
  }
}
</script>

<style scoped lang="scss">
  .submit{
    width: 80px;
    height: 30px;
    background: #009945;
    border-radius: 4px;
    color: #ffffff;
    text-align: center;
    line-height: 30px;
    font-size: 12px;
    float: left;
    cursor:pointer;
  }
  .cancel{
    width: 80px;
    float: left;
    height: 30px;
    border-radius: 4px;
    text-align: center;
    line-height: 30px;
    font-size: 12px;
    border: 1px solid #EEEEEE;
    margin-left: 20px;
    cursor:pointer;
  }
  .redact{
    width: 600px;
    height: 580px;
    background: #FFFFFF;
    box-shadow: 0px 0px 32px 0px rgba(97,97,97,0.1);
    border-radius: 8px;
    position:fixed;
    top: 50%;
    left: 50%;
    margin-left: -300px;
    margin-top: -285px;
    z-index: 10;
    .title{
      width: 100%;
      height: 40px;
      background: #e7e5e5;
      /*background:red;*/
      border-radius: 8px 8px 0px 0px;
    }
  }
  .search{
    width: 100%;
    height: 120px;
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0px 4px 20px 0px rgba(51,51,51,0.08);
    margin-top: 20px;
  }
  .list{
    width: 100%;
    height: 670px;
    background: #ffffff;
    box-shadow: 0px 4px 20px 0px rgba(51,51,51,0.08);
    border-radius: 8px;
    margin-top: 20px;
    position: relative;
    overflow: hidden;
    /*.el-table .warning-row {*/
    /*  background: #fdf5e6;*/
    /*}*/

    /*.el-table .success-row {*/
    /*  background: #f0f9eb;*/
    /*}*/
  }
  .int{
    width: 75%;
    float: left;
    input{
      padding: 0px 10px;
      width: 225px;
      height: 30px;
      background: #FFFFFF;
      border: 1px solid #E8E8E8;
      border-radius: 4px;
      margin-left: 20px;
      margin-top:20px;
    }
  }
  .inquire{
    width: 20%;
    height: 50px;
    float: left;
    margin-top: 20px;
  }

</style>
